<template>
  <div>
    <div>
      <a-upload :multiple="true"
                :fileList="fileList" :beforeUpload="beforeUpload" :remove="handleRemove"
      >
        <a-button> <a-icon type="upload" /> 请选择待检测的数据包 </a-button>
      </a-upload>
      <a-button
        type="primary"
        @click="handleUpload"
        :disabled="fileList.length === 0"
        :loading="uploading"
        style="margin-top: 16px"
      >
        {{uploading ? 'Uploading' : '开始导入' }}
      </a-button>
    </div>
    <div style="margin-top: 20px;">
      <a-upload :multiple="true"
                :fileList="fileList" :beforeUpload="beforeUpload" :remove="handleRemove"
      >
        <a-button> <a-icon type="upload" /> 请选择导入异常库 </a-button>
      </a-upload>
      <a-button
        type="primary"
        @click="handleUpload"
        :disabled="fileList.length === 0"
        :loading="uploading"
        style="margin-top: 16px"
      >
        {{uploading ? 'Uploading' : '开始导入' }}
      </a-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MusicList',
  data () {
    return {
      loading: true,
      fileList: [],
      uploading: false
    }
  },
  methods: {
    beforeUpload: function (file) {
      this.fileList = [...this.fileList, file]
      return false
    },
    handleRemove: function (file) {
      if (this.uploading) {
        this.$message.warning('文件导入中，请勿删除')
        return
      }
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
    handleUpload: function () {
      const { fileList } = this
      const formData = new FormData()
      fileList.forEach(file => {
        formData.append('files', file)
      })
      formData.append('type', '1')
      this.uploading = true
      this.$upload('hbase/upload', formData).then((r) => {
        this.uploading = false
        this.fileList = []
        this.$message.success('上传成功！')
      }).catch((r) => {
        console.error(r)
        this.uploading = false
        this.fileList = []
      })
    }
  },
  mounted () {
  }
}
</script>

<style scoped>

</style>
